<template>
  <div class="swiper-carousel">
    <mu-carousel :transition="isFade" :interval="3000">
      <mu-carousel-item v-for="(item, index) in swiperData" :key="index">
        <img :src="item.imgUrl" />
      </mu-carousel-item>
    </mu-carousel>
  </div>
</template>

<script>
export default {
  props: {
    swiperData: {
      type: Array,
      default: [],
    },
    isFade: {
      type: String,
      default: "fade",
    },
  },
  components: {},

  data() {
    return {};
  },

  created() {},

  mounted() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
.swiper-carousel {
  width: 100%;
  height: 100%;
  .mu-carousel {
    height: 100%;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
